@model MvcCmsSocial.Models.ViewData.SocialModel
<div class="gallery">
    <div class="image_container" id="image_container">
@{         
            var currentUser = Membership.GetUser();
            string currentUserName = "";
            if (currentUser != null) { currentUserName = currentUser.UserName; }
            var firstImage = "";
            var firstImageFriendly = "";
            bool firstImageIsProfilePic = false;
            int i = 0;     
            if (Model._SocialImages != null)
            {
                bool initialized = false;    
                foreach (var image in Model._SocialImages)
                {
                    if (!initialized)
                    {
                        firstImage = image.ImageName;
                        firstImageFriendly = image.ImageFriendlyName;
                        if (image.IsProfilePic)
                        {
                            firstImageIsProfilePic = true;
                        }
                        initialized = true;
                    }                                    
                    <a title="@image.ImageFriendlyName" href="javascript:void(0);" id="image-@i.ToString()" onclick="ChangeImage('@image.ImageName', '@image.ImageFriendlyName', @i.ToString() , @image.IsProfilePic.ToString().ToLower());">
                    <img alt='" + @image.ImageFriendlyName + "' src='/uploadedimages/@ViewData["PortalFolder"]/profiles/thumbs/@image.ImageName' />
                    </a>                
                    i += 1;
                }                              
            }
}        
    </div>
    
    <a href="javascript:;" onclick="MovePrev();" class="prev"></a><a onclick="MoveNext();" href="javascript:;" class="next"></a>
</div>
<div>
                
            @if (currentUserName == ViewData["UserName"].ToString() || Roles.IsUserInRole("Admin"))
            {                                                
                <text>
                <a id="setAsProfileLink" href="javascript:;" title="Delete Image" onclick="SetAsProfile();">Set As Profile</a> &nbsp;<a href="javascript:;" title="Delete Image" onclick="DeleteImage();">
                Delete <img class="deleteimage" alt="Delete Image" src="/Content/images/delete.gif" /></a> &nbsp;&nbsp;<span id="currentFriendlyName" ></span>        
                </text>
            }                
</div>
<div class="fullview">
<table id="fullview" >
    <tbody></tbody>
</table>
<img id="forIE" />
</div>
@Html.Hidden("currentImage") 
@Html.Hidden("currentImageNumber") 

<script type="text/javascript" >
var folder = '@ViewData["PortalFolder"]';
ChangeImage('@firstImage', '@firstImageFriendly', '', @(firstImageIsProfilePic.ToString().ToLower()));
function ChangeImage(newImage, friendlyName, imageNumber, isProfilePic) {
    var tblRow = "<img alt='" + friendlyName + "' title='" + friendlyName + "' src='/uploadedimages/" + folder + "/profiles/" + newImage + "' />";
    $("#currentImage").val(newImage);
    if(isProfilePic){$("#setAsProfileLink").hide();} else{$("#setAsProfileLink").show();}
    $("#currentImageNumber").val(imageNumber);
    $("#currentFriendlyName").text(friendlyName);        
    if ($.browser.msie) {
        $("#forIE").attr("src", "/uploadedimages/" + folder + "/profiles/" + newImage);
    }
    else {
        setTimeout("hide();", 300);
        setTimeout("show();", 2000);
        setTimeout('setdata("' + tblRow + '");', 1300);
    }
}
function setdata(data) {
    $("#fullview tbody").html("");
    $(data).appendTo("#fullview tbody");
}
function hide() {
    $("#fullview").hide("blind", { direction: "horizontal" }, 1100);
}
function show() {
    $("#fullview").show("blind", { direction: "horizontal" }, 1100);
}

function SetAsProfile() {
    var data = { ImageName: $("#currentImage").val() }
    var encoded = JSON.stringify(data);
    $.post(
        "/socialajax/setasprofile/",
        { data: encoded },
        function(data) {
            var objdata = data;
            if (objdata.error) {
                alert(objdata.error);
            }
            else {
                if (objdata.result == "success") {
                    alert("Your profile picture was changed.");
                }
                else {
                    alert("There was a problem removing the image.");
                }
            }
        },
        "json"
        );
}
function DeleteImage() {
    var data = { ImageName: $("#currentImage").val() }
    var encoded = JSON.stringify(data);
    $.post(
        "/socialajax/deleteimage/",
        { data: encoded },
        function(data) {
            var objdata = data;
            if (objdata.error) {
                alert(objdata.error);
            }
            else {
                if (objdata.result == "success") {
                    RemoveFileContainer($("#currentImageNumber").val());
                }
                else {
                    alert("There was a problem removing the image.");
                }
            }
        },
        "json"
    );
}
function RemoveFileContainer(imageID) {
    $("#image-" + imageID).fadeOut("slow", function() {
        $(this).remove();
    });
} 

// JavaScript Document
$move_by = 660;
$frame_left = 0;
$frame_no = 1;
$start_middle = 0;

$(document).ready(function() {

    $max_clicks = $("#image_container").children().size();        
    $imgCont = $move_by * $max_clicks;

    $("#image_container").css({ width: $imgCont });

    if ($start_middle == 1) {
        // Get the middle frame, according to the $max_clicks
        $new_frame_no = ($max_clicks / 2).toFixed(0)

        // Adjust the frame position
        $new_left = -($new_frame_no * $move_by);
        $new_left_attr = $new_left + "px";

        // Do the move
        $("#image_container").animate({ left: $new_left_attr }, 800);

        // Save the new values
        $frame_left = $new_left;
        $frame_no = ($new_frame_no / 1 + 1);
    }


});

function MovePrev() {
    /* Set the new position & frame number */
    $new_frame_no = (($frame_no / 1) - 1);
    $new_left = (($frame_left / 1) + $move_by);
    /* Check if we're moving too far over */
    if ($new_frame_no <= 0) {
        /* Move the images all the way left, minus one frame */
        $new_left = -($move_by * $max_clicks) + $move_by;
        $new_frame_no = $max_clicks;
    }
    $new_left_attr = $new_left + "px";
    $("#image_container").animate({ left: $new_left_attr }, 800);
    $frame_left = $new_left;
    $frame_no = $new_frame_no;

}
function MoveNext() {
    /* Set the new position & frame number */
    $new_frame_no = (($frame_no / 1) + 1);
    $new_left = (($frame_left / 1) - $move_by);
    /* Check if we're moving too far over */
    if ($new_frame_no > $max_clicks) {
        /* Move all the way right, to the beginning*/
        $new_left = 0;
        $new_frame_no = 1;
    }
    $new_left_attr = $new_left + "px";
    $("#image_container").animate({ left: $new_left_attr }, 800);
    $frame_left = $new_left;
    $frame_no = $new_frame_no;
}    
</script>
